<template>
    <div>
        <!-- <TableSearch :query="query" :options="searchOpt" :search="handleSearch" /> -->
        <div class="container">
            <TableCustom :columns="columns" :tableData="tableData" :total="page.total" :changePage="changePage">

                <template #status="{ rows }">
                    <el-tag type="warning" v-if="rows.status==0">未推送</el-tag>
                    <el-tag type="success" v-if="rows.status==1">成功</el-tag>
                    <el-tag type="danger" v-if="rows.status==2">失败</el-tag>

                </template>
                <template #is_del="{ rows }">
                    <el-tag type="info" v-if="rows.is_del==0">否</el-tag>
                    <el-tag type="success" v-if="rows.is_del==1">是</el-tag>
                </template>
            </TableCustom>
        </div>


    </div>
</template>

<script setup lang="ts">
    import { ref, reactive } from 'vue';
    import { ElMessage } from 'element-plus';
    import { CirclePlusFilled } from '@element-plus/icons-vue';
    import { User } from '@/types/user';
    import { agentPushRecordList, agentAddBot, agentSetBotCallback, agentDelCallback, agentEditBot } from '@/api';
    import TableCustom from '@/components/table-custom.vue';
    import TableDetail from '@/components/table-detail.vue';
    import TableSearch from '@/components/table-search.vue';
    import { FormOption, FormOptionList } from '@/types/form-option';

    // 查询相关
    const query = reactive({
        id_str: '',
    });
    const searchOpt = ref < FormOptionList[] > ([
        { type: 'input', label: '机器人ID:', prop: 'id_str' }
    ])
    const handleSearch = () => {
        page.id_str = query.id_str
        changePage(1);
    };
    let visibleRobot = ref(false)
    // 表格相关
    let columns = ref([

        { prop: 'id', label: '推送记录ID', width: 120 },
        { prop: 'push_message_id', label: '消息ID', width: 120 },
        { prop: 'bot_id_str', label: '机器人ID' },
        { prop: 'status', label: '状态' },
        { prop: 'tg_chatid', label: '用户ID' },
        { prop: 'tg_username', label: '用户名' },
        { prop: 'fail_reason', label: '推送失败原因' },
        { prop: 'is_del', label: '是否已删除' },
        { prop: 'tg_message_id1', label: 'TG消息ID1' },
        { prop: 'tg_message_id2', label: 'TG消息ID2' },
        { prop: 'create_date', label: '创建时间', width: 160 },
        { prop: 'update_date', label: '更新时间', width: 160 },


    ])
    const page = reactive({
        page: 1,
        limit: 10,
        id_str: '',
        total: 0
    })
    const tableData = ref < User[] > ([]);
    const getData = async () => {
        const res = await agentPushRecordList(page)
        tableData.value = res.data.data;
        page.total = res.data.total
    };
    getData();

    const changePage = (val: number) => {
        page.page = val;
        getData();
    };
</script>

<style scoped>
    .robot {
        margin: 20px 0;
        text-align: center;
        display: flex;
        align-items: center;

        .le {
            width: 210px;
        }
    }
</style>